import React from 'react';
import {Dimensions, PanResponder} from 'react-native';
import {Svg, G, Image, Rect, ClipPath, Defs} from 'react-native-svg';

const {width, height} = Dimensions.get('window')

//获取动态值
function getRandomNumberByRange(start, end) {
  return Math.round(Math.random() * (end - start) + start)
}

export default class GraphicSliderVerification extends React.Component {

  static navigationOptions = ({navigation}) => ({
    title: `滑动图像验证`,
  });

  imgX = 100;
  imgY = 100;
  imgH = 100;
  imgW = this.imgH * 2;//根据图库的图片宽高比设置相应的比例


  rectX = this.imgX;//矩形起点位置
  rectY = 300;
  rectH = 40;
  rectW = 200;

  sliderW = 60;


  clipW = 60;
  clipH = 40;

  _previousLeft = this.rectX;

  state = {
    x: this.rectX,
    image: '',
    clipRectX: 0,
    clipRectY: 0,
  }

  componentWillMount = () => {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: this._alwaysTrue,
      onMoveShouldSetPanResponder: this._alwaysTrue,
      onPanResponderGrant: this._handlePanResponderGrant,
      onPanResponderMove: this._handlePanResponderMove,
      onPanResponderRelease: this._handlePanResponderEnd,
      onPanResponderTerminate: this._handlePanResponderEnd
    });
  };

  componentDidMount() {
    this.setState({
      image: {uri: this._getRandomImg(0, 184)},
      clipRectX: this.imgX + getRandomNumberByRange(this.clipW, this.imgW - this.clipW),
      clipRectY: this.imgY + getRandomNumberByRange(0, this.imgH - this.clipH),
    })
  }


  _alwaysTrue = () => true;

  _handlePanResponderMove = (e, gestureState) => {
    let moveDistance = this._previousLeft + gestureState.dx;//此处需处理，因为点击滑块的位置不可知
    if (moveDistance >= this.rectX && moveDistance <= this.rectW + this.sliderW) {
      this.setState({
        x: this._previousLeft + gestureState.dx,
      });
    }
  };

  _handlePanResponderGrant = () => {
    this.root.setNativeProps({
      opacity: 0.5
    });
  };

  _handlePanResponderEnd = (e, gestureState) => {
    this.root.setNativeProps({
      opacity: 1
    });
    this._previousLeft += gestureState.dx;
    const offsent = Math.abs(this._previousLeft - this.state.clipRectX);
    if (offsent < 2) {
      alert('拼接成功')
    } else {
      alert('再试一次');
      this.x = this.rectX;
      this._previousLeft = this.rectX;
      this.setState({
        x:this.rectX,
        image: {uri: this._getRandomImg(0, 184)},
        clipRectX: this.imgX + getRandomNumberByRange(this.clipW, this.imgW - this.clipW),
        clipRectY: this.imgY + getRandomNumberByRange(0, this.imgH - this.clipH),
      })
    }


  };


  //动态设置图片
  _getRandomImg = () => {
    return 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 1084)
  }


  render() {
    return (
      <Svg width={width} height={height}>
        {/*定义裁剪*/}
        <Defs>
          <ClipPath id="clip">
            <Rect
              x={this.state.clipRectX}
              y={this.state.clipRectY}
              width={this.clipW}
              height={this.clipH}
            />
          </ClipPath>
        </Defs>

        {/*底部图片*/}
        <Image
          x={this.imgX}
          y={this.imgY}
          height={this.imgH}
          width={this.imgW}
          href={this.state.image}
        />

        {/*裁剪占位 矩形*/}
        <Rect
          x={this.state.clipRectX}
          y={this.state.clipRectY}
          width={this.clipW}
          height={this.clipH}
          fill="#e5e5e5"
        />
        {/*活动裁剪图*/}
        <G x={this.state.x - (this.state.clipRectX)}>
          <Image
            x={this.imgX}
            y={this.imgY}
            height={this.imgH}
            width={this.imgW}
            href={this.state.image}
            clipPath="url(#clip)"
          />
        </G>

        {/*滑动块*/}
        <Rect
          x={this.rectX}
          y={this.rectY}
          height={this.rectH}
          width={this.rectW}
          fill="#e5e5e5"
          stroke={'#999'}
          strokeWidth="2"
        />
        <G
          x={this.state.x}
          ref={ele => {
            this.root = ele;
          }}
          {...this._panResponder.panHandlers}
        >
          <Rect
            x={0}
            y={this.rectY}
            height={this.rectH}
            width={this.sliderW}
            fill="#fff"
            stroke={'#999'}
            strokeWidth="2"
          />
        </G>
      </Svg>
    )
  }
}
